{extend name="articles" /}

{block name="content"}
<!-- 页面头部 -->
<div class="page-header">
    <div class="container">
        <h1 data-aos="fade-up">{$topic.name ?: '专题'}</h1>
        <p data-aos="fade-up" data-aos-delay="100">{$topic.description ?: '查看该专题下的所有文章'}</p>
        <nav aria-label="breadcrumb" data-aos="fade-up" data-aos-delay="200">
            <ol class="breadcrumb breadcrumb-custom">
                <li class="breadcrumb-item"><a href="/index.html">首页</a></li>
                <li class="breadcrumb-item"><a href="/articles.html">新闻动态</a></li>
                <li class="breadcrumb-item active" aria-current="page">{$topic.name ?: '专题'}</li>
            </ol>
        </nav>
    </div>
</div>

<div class="container">
    <div class="row">
        <!-- 文章列表 -->
        <div class="col-lg-8">
            <!-- 专题信息卡片 -->
            {if condition="$topic.cover_image || $topic.description"}
            <div class="sidebar-card" data-aos="fade-up" style="margin-bottom: 2rem;">
                {if condition="$topic.cover_image"}
                <img src="{$topic.cover_image}" alt="{$topic.name}" style="width: 100%; border-radius: 10px; margin-bottom: 1rem;">
                {/if}
                {if condition="$topic.description"}
                <p class="text-secondary">{$topic.description}</p>
                {/if}
                <div class="mt-3">
                    <span class="text-secondary">文章数：</span>
                    <strong>{$topic.article_count ?: 0}</strong>
                    <span class="text-secondary ms-4">浏览量：</span>
                    <strong>{$topic.view_count ?: 0}</strong>
                </div>
            </div>
            {/if}

            <div class="article-list">
                {volist name="articles" id="article"}
                <article class="article-card" data-aos="fade-up">
                    <div class="row g-0">
                        <div class="col-md-5">
                            <img src="{$article.cover_image ?: '/assets/images/placeholder/article.svg'}" alt="{$article.title}" class="article-image">
                        </div>
                        <div class="col-md-7">
                            <div class="article-content">
                                <div class="article-meta">
                                    <span><i class="bi bi-calendar"></i> {$article.create_time|date='Y-m-d'}</span>
                                    <span><i class="bi bi-person"></i> {$article.user.username ?: '管理员'}</span>
                                    <span><i class="bi bi-eye"></i> {$article.view_count ?: 0}</span>
                                </div>
                                <h3><a href="/article-{$article.id}.html">{$article.title}</a></h3>
                                <p class="article-summary">{$article.summary ?: mb_substr($article.content, 0, 150, 'utf-8')}...</p>
                                {if condition="$article.tags"}
                                <div class="article-tags">
                                    {volist name="article.tags" id="tag"}
                                    <a href="/tag-{$tag.id}.html" class="article-tag">{$tag.name}</a>
                                    {/volist}
                                </div>
                                {/if}
                                <a href="/article-{$article.id}.html" class="read-more">
                                    阅读全文 <i class="bi bi-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </article>
                {/volist}

                {empty name="articles"}
                <div class="text-center py-5" data-aos="fade-up">
                    <i class="bi bi-inbox" style="font-size: 4rem; color: #cbd5e1;"></i>
                    <p class="mt-3 text-secondary">该专题下暂无文章</p>
                </div>
                {/empty}
            </div>

            <!-- 分页 -->
            {notempty name="pagination"}
            {if condition="$pagination.total_pages > 1"}
            <div class="pagination-wrapper" data-aos="fade-up">
                <nav aria-label="专题文章分页">
                    <ul class="pagination justify-content-center">
                        <!-- 上一页 -->
                        {if condition="$pagination.current_page > 1"}
                        <li class="page-item">
                            <a class="page-link" href="{$pagination.current_page == 2 ? '/topic-' . $topic.id . '.html' : '/topic-' . $topic.id . '-' . ($pagination.current_page - 1) . '.html'}">上一页</a>
                        </li>
                        {/if}

                        <!-- 页码列表 -->
                        {for start="1" end="$pagination.total_pages" name="i"}
                        <li class="page-item {$i == $pagination.current_page ? 'active' : ''}">
                            <a class="page-link" href="{$i == 1 ? '/topic-' . $topic.id . '.html' : '/topic-' . $topic.id . '-' . $i . '.html'}">{$i}</a>
                        </li>
                        {/for}

                        <!-- 下一页 -->
                        {if condition="$pagination.current_page < $pagination.total_pages"}
                        <li class="page-item">
                            <a class="page-link" href="/topic-{$topic.id}-{$pagination.current_page + 1}.html">下一页</a>
                        </li>
                        {/if}
                    </ul>
                </nav>
            </div>
            {/if}
            {/notempty}
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-4">
            <!-- 专题信息 -->
            <div class="sidebar-widget" data-aos="fade-up">
                <div class="widget-header">
                    <h3><i class="bi bi-bookmark-star-fill"></i> 专题信息</h3>
                </div>
                <div class="category-info">
                    <p class="text-secondary">{$topic.description ?: '暂无描述'}</p>
                    <div class="info-stats">
                        <div class="stat-item">
                            <span class="stat-label">文章数</span>
                            <span class="stat-value">{$topic.article_count ?: 0}</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">浏览量</span>
                            <span class="stat-value">{$topic.view_count ?: 0}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 其他专题 -->
            <div class="sidebar-widget" data-aos="fade-up" data-aos-delay="100">
                <div class="widget-header">
                    <h3><i class="bi bi-collection"></i> 推荐专题</h3>
                </div>
                {carefree:topic limit='8' order='sort desc,create_time desc' id='t' empty='<div class="empty-state"><p>暂无专题</p></div>'}
                <div class="category-list">
                    <a href="/topic-{$t.id}.html" class="category-item {if condition="$t.id == $topic.id"}active{/if}">
                        <i class="bi bi-bookmark-star"></i> {$t.name}
                        <span class="category-count">({$t.article_count ?: 0})</span>
                    </a>
                </div>
                {/carefree:topic}
            </div>

            <!-- 引入公共侧边栏 -->
            {include file="sidebar" /}
        </div>
    </div>
</div>
{/block}
